<!-- 
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-07-04 08:45:36
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '党员学习',
  },
}
</route>
<template>
  <view class="bg-#f6f6f6 overflow-auto w-100% h-screen p-20rpx box-border">
    <view>
      <wd-tabs v-model="tab" @click="handleClick">
        <block v-for="(item, index) in tabs" :key="index">
          <wd-tab :title="item.label"></wd-tab>
        </block>
      </wd-tabs>
      <view v-if="tab == 0">
        <TobeCompleted :todoItems="studyList" />
      </view>
      <view v-if="tab == 1">
        <Completed :completedItems="studyList" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import TobeCompleted from '../PartyBuilding/TobeCompleted.vue'
import Completed from '../PartyBuilding/Completed.vue'
import { getStudy } from '@/service/partBuilding/index'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const saveId = ref()
const tab = ref<number>(0)
const tabs = [{ label: '待完成' }, { label: '已完成' }]

const studyList = ref([])
const study = reactive({
  pageNo: 1,
  pageSize: 100,
  type: '',
  status: 0,
  userId: saveId.value,
})
// tab
const handleClick = (e) => {
  tab.value = e.index
  study.status = tab.value
  study.userId = saveId.value
  getTodoList()
}
// 获取未完成列表
async function getTodoList() {
  const data: any = await getStudy({ ...study })
  studyList.value = data.data.list
  studyList.value = studyList.value.map((item) => {
    item.coverImage = `${baseurl.value}${item.coverImage}`
    return item
  })
}
onLoad(() => {
  uni.getStorageInfo({
    success: function () {
      // 单独获取 'user' 键的值
      uni.getStorage({
        key: 'user',
        success: function (res) {
          const data = JSON.parse(res.data)
          saveId.value = data.userInfo.residentId
          study.userId = saveId.value
          getTodoList()
        },
        fail: function (err) {
          console.error('获取 user 失败:', err)
        },
      })
    },
  })
})
</script>
<style lang="scss">
::v-deep.wd-tabs__line {
  display: none;
}
::v-deep.wd-tabs__nav-item.is-active {
  margin-bottom: 8rpx;
  font-weight: normal !important;
  color: rgba(207, 57, 57, 1) !important;
  border-bottom: 6rpx solid rgba(207, 57, 57, 1) !important;
}
::v-deep.wd-tabs__nav-item {
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  height: 64rpx !important;
  font-size: 32rpx !important;
}
::v-deep.wd-tabs__nav-item:first-child {
  margin-right: 48rpx;
}
::v-deep.wd-tabs__nav-container {
  justify-content: center !important;
  margin-bottom: 20rpx;
}
</style>
